<template>
    <div class="my-page tm-page">
        <tm-sticky :top="0" :zIndex="5">
            <tm-button type="danger">提交</tm-button>
        </tm-sticky>
        <tm-image class="avatar" width="80" height="80" :src="src" round />
        <p class="nickname ellipsis">{{ nickname }}</p>
        <tm-search-bar v-model="keyword" />
        <tm-button size="small" @click="consoleHandle">打印</tm-button>
        <br />
        <tm-cell-group radius>
            <tm-cell-item label="收藏" icon="icon-star" arrow></tm-cell-item>
            <tm-cell-item label="喜欢" icon="icon-heart" arrow></tm-cell-item>
            <tm-cell-item label="意见反馈" icon="icon-bulb" arrow></tm-cell-item>
            <tm-cell-item label="设置" icon="icon-setting" arrow></tm-cell-item>
        </tm-cell-group>
        <tm-button @click="onClick">提交</tm-button>
        <tm-button type="danger">提交</tm-button>
        <tm-button type="primary">提交</tm-button>
        <tm-button type="success">提交</tm-button>
        <br />
        <tm-button size="small">提交</tm-button>
        <tm-button size="small" type="danger">提交</tm-button>
        <tm-button size="small" type="primary">提交</tm-button>
        <tm-button size="small" type="success">提交</tm-button>
        <br />
        <br />
        <tm-stepper :rule="1" :min="1" :max="5" />
        <br />
        <tm-form align="left">
            <tm-form-item title="姓名">
                <tm-switch v-model="switchModel"></tm-switch>
            </tm-form-item>
            <tm-form-item title="电话">
                <tm-input v-model="inputValue">
                    <template #icon>
                        <i class="iconfont icon-search"></i>
                    </template>
                </tm-input>
            </tm-form-item>
            <tm-form-item title="通讯地址">
                <input class="tm-form-item_input" />
            </tm-form-item>
            <tm-form-item #footer>
                <tm-button type="primary" @click="reset">重置</tm-button>
                <tm-button type="success" @click="submit">提交</tm-button>
            </tm-form-item>
        </tm-form>
        <br />
    </div>
</template>
<script>
import { reactive, toRefs } from 'vue'
import TmImage from '@tomatoUi/components/Image/index.vue'
import TmCellGroup from '@tomatoUi/components/Cell/group.vue'
import TmCellItem from '@tomatoUi/components/Cell/item.vue'
import TmButton from '@tomatoUi/components/Button/index.vue'
import TmStepper from '@tomatoUi/components/Stepper/index.vue'
import TmForm from '@tomatoUi/components/Form/index.vue'
import TmFormItem from '@tomatoUi/components/Form/item.vue'
import TmSwitch from '@tomatoUi/components/Switch/index.vue'
import TmSearchBar from '@tomatoUi/components/SearchBar/index.vue'
import TmSticky from '@tomatoUi/components/Sticky/index.vue'
import TmInput from '@tomatoUi/components/Input/index.vue'
export default {
    components: {
        TmImage,
        TmCellGroup,
        TmCellItem,
        TmButton,
        TmStepper,
        TmForm,
        TmFormItem,
        TmSwitch,
        TmSearchBar,
        TmSticky,
        TmInput,
    },
    setup() {
        const state = reactive({
            src: 'https://v3.cn.vuejs.org/logo.png',
            nickname: '王二蛋',
            switchModel: false,
            keyword: '',
            inputValue: '',
        })

        const consoleHandle = () => {
            console.log('打印数据====', state.keyword)
        }

        const reset = () => {
            console.log('用户点击了重置！')
        }

        const submit = () => {
            console.log('用户点击了提交！')
        }

        return {
            ...toRefs(state),
            onClick(e) {
                console.log('你点击的是 ->', e.target.tagName)
            },
            consoleHandle,
            reset,
            submit,
        }
    },
}
</script>

<style lang="scss" scoped>
.my-page {
    padding: 12px 12px 70px;
    .avatar {
        margin: 0 auto;
    }
    .nickname {
        width: 200px;
        padding: 12px 0;
        margin: 0 auto;
        font-size: 18px;
        color: #666666;
        text-align: center;
    }
}
</style>
